<template>
  <div>
    <h2>简易加法计算器</h2>
    <div>
      <input type="button" value="-" @click="deHandle({de:5})" />
      <!-- <span>{{num}}</span>
      <h3>{{num2}}</h3> -->
      
      <!-- 辅助函数 -->
      <h2>{{count}}</h2>
      <h2>{{num2}}</h2>
      <input type="button" value="+" @click="addHandle" />

    </div>
  </div>
</template>

<script>
    import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'

    export default {
        // computed:{
        //     num(){
        //         return this.$store.state.count
        //     },
        //     num2(){
        //         return this.$store.getters.filterCount
        //     }
        // },
        computed:{
            // count
            ...mapState(['count']),
            ...mapGetters({
                num2:'filterCount'
            })

        },
        methods:{
            // addHandle(){
            //     // 改变状态，提交mutation addIncrement
            //     // this.$store.commit('addIncrement',5)  直接提交

            //     // 异步操作，触发Actions
            //     this.$store.dispatch('addAction')
            // },
            ...mapActions({
                addHandle:'addAction'
            }),
            // deHandle(){
            //     this.$store.commit('deIncrement')
            // }
            // deHandle(){
            //     this.$store.commit({
            //         type:'deIncrement',
            //         de:10
            //     })
            // }
            ...mapMutations({
                deHandle:'deIncrement'
            })
        }
    }
</script>
<style>

</style>
